<template>
  <div class="execution">
    <basic-container>
      <avue-crud ref="crud"
                 :page="page"
                 :data="tableData"
                 :permission="permissionList"
                 :table-loading="tableLoading"
                 :option="tableOption"
                 @on-load="getList"
                 @search-change="searchChange"
                 @refresh-change="refreshChange"
                 @row-update="handleUpdate"
                 @row-save="handleSave"
                 @row-del="rowDel">
        <!-- 借款方页面添加按钮 -->
        <template slot-scope="scope" slot="menu">
          <el-button
            icon="el-icon-view"
            class="getbtn"
            type="text"
            plain
            size="small"
            @click.stop="handleGetdata(scope.row,scope.index)"
          >详情</el-button>
          <el-button
            icon="el-icon-thumb"
            class="getbtn"
            type="text"
            plain
            size="small"
            :disabled="!(btnId==scope.row.phone)"
            @click.stop="handleRealname(scope.row,scope.index)"
          >操作</el-button>
          <!-- :class="{hiden:deptId=='38' || deptId=='39' || deptId=='37'}" -->
          <!-- :disabled="!(btnId==scope.row.phone && deptId=='40')" -->
        </template>
      </avue-crud>
      <div class="mask" v-if="isShow" @click.self="maskShows">
        <div>
          <div>
            <div>
              账户编号：
              <el-input disabled v-model="form.id"></el-input>
            </div>
            <div>
              资金方名称：
              <el-input disabled v-model="form.name"></el-input>
            </div>
          </div>
          <div>
            <div>
              电子账户账号
              <el-input disabled v-model="form.electronicAccountCode"></el-input>
            </div>
            <div>
              电子账户开户行
              <el-input disabled v-model="form.electronicAccountOpen"></el-input>
            </div>
          </div>
          <div>
            <div>
              电子账户名称
              <el-input disabled v-model="form.electronicAccountName"></el-input>
            </div>
            <div>
              联行号
              <el-input disabled v-model="form.electronicAccountBankCode"></el-input>
            </div>
          </div>
          <div>
            <div>
              省市区地址
              <el-input disabled v-model="form.provinceAndCity"></el-input>
            </div>
            <div>
              详细地址
              <el-input disabled v-model="form.address"></el-input>
            </div>
          </div>
          <div>
            <div class="imgstyle">
              身份证正面照片
              <div class="images" v-for="(item, index) in form.codePhotoJustName" :key="index">
                <el-image
                  style="width: 100px; height: 100px"
                  :src="item"
                  :preview-src-list="form.codePhotoJustName"
                ></el-image>
              </div>
            </div>
            <div>
              身份证反面照片
              <div class="images" v-for="(item, index) in form.codePhotoBackName" :key="index">
                <el-image
                  style="width: 100px; height: 100px"
                  :src="item"
                  :preview-src-list="form.codePhotoBackName"
                ></el-image>
              </div>
            </div>
          </div>
          <div>
            <div>
              企业名称
              <el-input disabled v-model="form.enterpriseName"></el-input>
            </div>
            <div>
              企业营业执照号码
              <el-input disabled v-model="form.unifiedSocialCreditCode"></el-input>
            </div>
          </div>
          <div>
            <div>
              企业法人姓名
              <el-input disabled v-model="form.name"></el-input>
            </div>
            <div>
              企业法人身份证号码
              <el-input disabled v-model="form.cardCode"></el-input>
            </div>
          </div>
          <div>
            <div>
              企业法人电话
              <el-input disabled v-model="form.legalPersonContactNumber"></el-input>
            </div>
            <div></div>
          </div>
        </div>
      </div>
      <maskrealname :showMask="showMask" @changeComponent1Data="component1DataChange"></maskrealname>
    </basic-container>
  </div>
</template>

<script>
import {
  fetchList,
  getObj,
  addObj,
  putObj,
  delObj,
  phoneObj
} from "@/api/insurance/user";
import { tableOption } from "@/const/crud/insurance/user";
import { mapGetters } from "vuex";
import maskrealname from "@/components/maskRealname/Maskrealname";
export default {
  name: "user",
  created() {
    this.deptId = sessionStorage.getItem("deptId");
  },
  components: {
    maskrealname
  },
  data() {
    return {
      searchForm: {},
      tableData: [],
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 20 // 每页显示多少条
      },
      tableLoading: false,
      tableOption: tableOption,
      isShow: false,
      showMask: false,
      deptId: "",
      btnId: "",
    };
  },
  computed: {
    ...mapGetters(["permissions"]),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permissions.insurance_user_add, false),
        delBtn: this.vaildData(this.permissions.insurance_user_del, false),
        editBtn: this.vaildData(this.permissions.insurance_user_edit, false)
      };
    }
  },
  methods: {
    getList(page, params) {
      this.tableLoading = true;
      fetchList(
        Object.assign(
          {
            current: page.currentPage,
            size: page.pageSize
          },
          params,
          this.searchForm
        )
      )
        .then(response => {
          this.tableData = response.data.data.records;
          this.page.total = response.data.data.total;
          this.tableLoading = false;
        })
        .catch(() => {
          this.tableLoading = false;
        });
    },
    rowDel: function(row, index) {
      var _this = this;
      this.$confirm("是否确认删除ID为" + row.id, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(function() {
          return delObj(row.id);
        })
        .then(data => {
          _this.$message.success("删除成功");
          this.getList(this.page);
        });
    },
    handleUpdate: function(row, index, done, loading) {
      putObj(row)
        .then(data => {
          this.$message.success("修改成功");
          done();
          this.getList(this.page);
        })
        .catch(() => {
          loading();
        });
    },
    handleSave: function(row, done, loading) {
      addObj(row)
        .then(data => {
          this.$message.success("添加成功");
          done();
          this.getList(this.page);
        })
        .catch(() => {
          loading();
        });
    },
    searchChange(form) {
      this.searchForm = form;
      this.getList(this.page, form);
    },
    refreshChange() {
      this.getList(this.page);
    },
    handleGetdata(row, index) {
      phoneObj({ id: row.id })
        .then(data => {
          if (data.data.code == "2011") {
            this.$message(data.data.msg);
            this.btnId = row.phone;
          } else {
            let params = {
              id: data.data.data.id,
              name: data.data.data.name,
              electronicAccountCode: data.data.data.electronicAccountCode,
              electronicAccountOpen: data.data.data.electronicAccountOpen,
              electronicAccountName: data.data.data.electronicAccountName,
              electronicAccountBankCode:
                data.data.data.electronicAccountBankCode,
              provinceAndCity: data.data.data.provinceAndCity,
              address: data.data.data.address,
              codePhotoJustName: [
                `data:image/jpg;base64,${data.data.data.codePhotoJustName}`
              ],
              codePhotoBackName: [
                `data:image/jpg;base64,${data.data.data.codePhotoBackName}`
              ],
              enterpriseName: data.data.data.enterpriseName,
              unifiedSocialCreditCode: data.data.data.unifiedSocialCreditCode,
              name: data.data.data.name,
              cardCode: data.data.data.cardCode,
              legalPersonContactNumber: data.data.data.legalPersonContactNumber
            };
            this.form = params;
            this.isShow = true;
          }
        })
        .catch(() => {});
    },
    maskShows() {
      this.isShow = false;
    },
    // 操作按钮
    handleRealname(row, index) {
      console.log(row, index);
      this.showMask = true;
    },
    component1DataChange(params) {
      this.showMask = params;
    },
  }
};
</script>

<style lang="scss" scoped>
.mask {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 200;
  display: flex;
  justify-content: center;
  align-items: center;
  & > div {
    width: 66%;
    background: #fff;
    padding: 20px;
    overflow: hidden;
    height: 80%;
    overflow-y: scroll;
    line-height: 30px;
    position: relative;
    & > div {
      display: flex;
      justify-content: space-around;
      & > div {
        width: 40%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
        .el-input {
          width: 66%;
        }
        & > div {
          width: 66%;
        }
      }
    }
  }
  & > div::-webkit-scrollbar {
    width: 0;
    height: 0;
    background-color: transparent;
  }
}
.hiden {
  display: none;
}
/deep/ .el-image-viewer__close {
  color: #fff;
}
</style>
